<!DOCTYPE html>
<html>
<head>
    <title>视频编辑</title>
    <#include "/header.html">
    <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.0.0.min.js"></script>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<style>

</style>
<div  class="panel panel-default" id="rrapp" v-cloak>
    <div v-show="!hebing" id="hebing" style="text-align:center">
        <table style="margin: auto;text-align:center;border-collapse:separate; border-spacing:0px 20px;position: center">
            <tr>
                <td>
                    开始时间：
                    <input type="datetime-local" name="" value="" id="startTime1" onblur="vm.getValueStart(this)"/>
                </td>
            </tr>
            <tr>
                <td>
                    结束时间：
                    <input type="datetime-local" name="" value="" id="endTime1" onblur="vm.getValueEnd(this)"/>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" class="btn btn-primary" onclick="vm.addPushArticle()" value="确定"/>
                </td>
            </tr>
        </table>
    </div>
    <div class="panel-heading" >视频标题：{{bVideoInfo.articleTitle}}</div>
    <form class="form-horizontal">

        <div class="form-group" style="display: none">
            <div class="col-sm-2 control-label" style="color: red;">品牌</div>
            <div class="col-sm-10">
                <input class="form-control" list="editBrandNames" placeholder="品牌" id="brandName">
                <datalist id="editBrandNames" style="line-height: 10px">

                </datalist>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-2 control-label" style="color: red;">分类</div>
            <div class="col-sm-10">
                <input class="form-control" list="editTypeNames" placeholder="分类" id="articleTypeName">
                <datalist id="editTypeNames" style="line-height: 10px">

                </datalist>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-2 control-label">视频标题</div>
            <div class="col-sm-10">
                <input type="text" class="form-control" v-model="bVideoInfo.articleTitle" id="articleTitle" name="articleTitle" placeholder="视频标题"/>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-2 control-label">封面图片</div>
            <div class="col-sm-10">
                <img id="articleImgUrl" width="100px" height="100px" />
                <!--<img width="200px" height="200px" id="img"/>-->
                <input type="file" accept="image/*"  class="form-control" id='uploadImg' onchange="inserttx(this,'ps')"/>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-2 control-label">视频文件</div>
            <div class="col-sm-10">
                <!--<img id="videoImgUrl" width="100px" height="100px" />-->
                <!--<img width="200px" height="200px" id="img"/>-->
                <video id="videoUrl" width="200px" height="200px"  controls="controls">
                    您的浏览器不支持 video 标签。
                </video>
                <!--<input type="file" accept="video/mp4,audio/mp4"  class="form-control" id='uploadVideo' onchange="inserttx(this,'video')"/>-->
                <input type="file" accept="video/mp4,audio/mp4"  class="form-control" id='uploadVideo' onchange="insertVideo(this)"/>
            </div>
        </div>
        <!-- 默认视频压缩 -->
        <div class="form-group">
            <div class="col-sm-2 control-label">视频压缩</div>
            <div class="col-sm-10" id="videoCompression">
                <label class="radio-inline">
                    <input checked type="radio" name="compression" value="1" /> 压缩
                </label>
                <label class="radio-inline">
                    <input type="radio" name="compression" value="0" /> 不压缩
                </label>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label">视频高度</div>
            <div class="col-sm-10">
                <input type="text" class="form-control" v-model="bVideoInfo.videoHeight" id="videoHeight" name="videoHeight" placeholder="视频高度(px)"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label">摘要</div>
            <div class="col-sm-10">
                <input type="text" class="form-control" v-model="bVideoInfo.articleContent" id="articleContent" name="articleContent" placeholder="摘要"/>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-2 control-label">分享配文</div>
            <div class="col-sm-10">
            <!--    <input type="text" class="form-control" v-model="bVideoInfo.articleDesc" id="articleDesc" name="articleDesc" placeholder="分享配文"/>-->
                <textarea cols="25" rows="10" class="form-control" v-model="bVideoInfo.articleDesc"></textarea>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-2 control-label">显示类型</div>
            <div class="col-sm-10">
                <label class="radio-inline">
                    <input checked type="radio" name="articleVersionNum" value="2" v-model="bVideoInfo.articleVersionNum"  /> 常规
                </label>
                <label class="radio-inline">
                    <input type="radio" name="articleVersionNum" value="0" v-model="bVideoInfo.articleVersionNum" /> 大图
                </label>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-2 control-label">热度类型</div>
            <div class="col-sm-10">
                <label class="radio-inline">
                    <input type="radio" name="hotType" value="0" v-model="bVideoInfo.hotType"  /> 随机
                </label>
                <label class="radio-inline">
                    <input type="radio" name="hotType" value="1" v-model="bVideoInfo.hotType" /> 自定义
                </label>
                <input type="text" class="form-control" v-model="bVideoInfo.articleHotScore" id="articleHotScore" name="articleHotScore" placeholder="热度值"/>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-2 control-label">推送文章</div>
            <div class="col-sm-10">
                <input @click="openPushArticle" type="button" value="添加到待推送文章" class="btn btn-primary">
            </div>
        </div>

        <div class="form-group">
            <!--<script id="editor" type="text/plain" style="width:1024px;"></script>-->
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label" style="color: red;">头条标题</div>
            <div class="col-sm-10">
                <div id="headlineTitle">

                </div>

            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label"></div>
            <input type="button" class="btn btn-primary" @click="updateInfo" value="保存"/>
            <input onclick='window.close();' type="button" value="返回" class="rrapp-but" style="background-color: #f0ad4e;border-color: #f0ad4e;color: #fff"/>
        </div>
    </form>
</div>
<script>

        $(function () {

            $.ajax({
                type: "POST",
                async:false,
                url: baseURL + 'sys/bvideoinfo/HeadlineTitle',
                contentType: "application/json",
                success: function(r){

                    if(r.code==0){
                        for(var i=0;i<r.titles.length;i++){
                            $("#headlineTitle").append(
                                " <input type='checkbox' id='html"+i+"' value='"+r.titles[i].id+"' name='a' onclick='checkboxOnclick()'/>"+
                                " <label for='html"+i+"'>"+r.titles[i].gzhName+":"+r.titles[i].headlineName+"</label><br/>"
                            )
                        }
                    }
                }
            });

            $.ajax({
                type: "POST",
                async:false,
                url: baseURL + 'sys/bbrandinfo/queryAll',
                contentType: "application/json",
                success: function(r){
                    if(r.code==0){
                        vm.bbrandinfo=r.brandInfo;
                        for(var i=0;i<r.brandInfo.length;i++){
                            $("#editBrandNames").append(
                                "<option value=" + r.brandInfo[i].brandName +">"+"</option>");
                        }
                    }
                }
            });

            $.ajax({
                type: "POST",
                async:false,
                url: baseURL + 'sys/barticletypeinfo/queryAll',
                contentType: "application/json",
                success: function(r){
                    if(r.code==0){
                        //vm.bbrandinfo=r.brandInfo;
                        for(var i=0;i<r.barticletypeinfo.length;i++){
                            $("#editTypeNames").append(
                                "<option value=" + r.barticletypeinfo[i].articleTypeName +">"+"</option>");
                        }
                    }
                }
            });

            var url = location.search;
            var videoId = url.split("=")[1];
            if(videoId!=0){
                loadData(videoId);
            }

        })

        function checkboxOnclick(){
            text = $("input:checkbox[name='a']:checked").map(function(index,elem) {
                return $(elem).val();
            }).get().join(',');
            // alert("选中的checkbox的值为："+text);
            vm.bVideoInfo.headlineTitleIds = text
            console.log(text)
        }

        function loadData(e) {
            console.log("e:"+e);
            $.get(baseURL + "sys/bvideoinfo/info/"+e, function(r){
                vm.bVideoInfo=r.bVideoInfo;

                $("#articleImgUrl").attr("src",vm.bVideoInfo.articleImgUrl);

                $("#videoUrl").attr("src", vm.bVideoInfo.videoUrl);

                $("#brandName").val(vm.bVideoInfo.brandName);

                $("#articleTypeName").val(vm.bVideoInfo.articleTypeName);
                if (null != r.bVideoInfo.headlineTitleIds){
                    $(r.bVideoInfo.headlineTitleIds.split(",")).each(function (i,dom){
                        console.log(dom);
                        $(":checkbox[value='"+dom+"']").prop("checked",true);
                    });
                }
            })
        }

        function upload(file, pathname ) {
            console.log(file);
            var bucketName='zktuistatic';
            const client = new window.OSS({
                region: 'oss-cn-shenzhen', // hangzhou, shanghai, shenzhen
                accessKeyId: 'LTAI4Fh7PnYLw3uQvoUYiazS',
                accessKeySecret: 'cEw7e8QMz0h4XY4qmzCoTzhHITqyUU',
                bucket: bucketName
            });
            var date = new Date();
            var yeaer = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            if (month < 10) {
                month = "0" + month;
            }
            if (day < 10) {
                day = "0" + day;
            }
            var datePath =yeaer+""+month+""+day;
            var key = "";
            var exName=getFileExtendingName(file.name);
            key=pathname+"/"+datePath+"/"+guid()+exName;
            client.put(key, file).then(function () {
                return client.get(key);
            }).then(function(ret) {
                var rootUrl="http://zktfile.wxslzf.com/";
                console.log(ret.res);
                if(ret.res.status==200 && ret.res.statusCode==200) {
                    if (pathname == 'ps') {

                        if (vm.bVideoInfo.articleImgUrl != null && vm.bVideoInfo.articleImgUrl != '') {
                            var objName = vm.bVideoInfo.articleImgUrl.replace(rootUrl, "");
                            if (objName != null && objName != '') {
                                client.delete(objName);
                            }
                        }

                        vm.bVideoInfo.articleImgUrl = ret.res.requestUrls[0].replace("http://zktuistatic.oss-cn-shenzhen.aliyuncs.com/", "http://zktfile.wxslzf.com/");
                        $("#articleImgUrl").attr("src", vm.bVideoInfo.articleImgUrl);
                    } else if (pathname == 'video') {

                        if (vm.bVideoInfo.videoUrl != null && vm.bVideoInfo.videoUrl != '') {
                            var objName = vm.bVideoInfo.videoUrl.replace(rootUrl, "");
                            if (objName != null && objName != '') {
                                client.delete(objName);
                            }
                        }

                        vm.bVideoInfo.videoUrl = ret.res.requestUrls[0].replace("http://zktuistatic.oss-cn-shenzhen.aliyuncs.com/", "http://zktfile.wxslzf.com/");
                        vm.bVideoInfo.videoFormat=exName;
                        vm.bVideoInfo.videoSize=ret.res.size;
                        $("#videoUrl").attr("src", vm.bVideoInfo.videoUrl);
                    }
                }

            }).catch(function(err) {
                console.log(err);
            });
        }

        function inserttx(e,pathname) {
            var files = e.files;
            var length = files.length;
            console.log("选择了" + length + "张图片");
            upload(files[0],pathname);
        }

        function insertVideo(e) {
            // 是否压缩
            let isCompression = $("#videoCompression input[name='compression']:checked").val();
            console.log("[isCompression] = " + isCompression);

            // 如果不压缩，直接上传到OSS
            if (isCompression == 0) {
                inserttx(e, "video");
            } else {
                var files = e.files;
                var form = new FormData();
                form.append("file", files[0]);

                $.ajax({
                    type: "POST",
                    url: baseURL + "upload/video",
                    data: form,
                    processData: false,
                    contentType: false,
                    success: function (r) {
                        if (r.code === 0) {
                            console.log("[videoUrl] = " + r.articleVideoUrl);
                            console.log("[videoFormat] = " + r.videoFormat);
                            console.log("[fileSize] = " + r.fileSize);

                            vm.bVideoInfo.videoUrl = r.articleVideoUrl;
                            vm.bVideoInfo.videoFormat = r.videoFormat;
                            vm.bVideoInfo.videoSize = r.fileSize;
                            $("#videoUrl").attr("src", vm.bVideoInfo.videoUrl);
                        } else {
                            alert(r.msg);
                        }
                    }
                });
            }
        }

        function getFileExtendingName (filename) {
            // 文件扩展名匹配正则
            var reg = /\.[^\.]+$/;
            var matches = reg.exec(filename);
            if (matches) {
                return matches[0];
            }
            return '';
        }

        function guid() {
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
                return v.toString(16);
            });
        }
</script>
<script src="${request.contextPath}/statics/js/modules/sys/bvideoinfo.js?_${.now?long}"></script>
</body>
</html>
